<template>
	<!-- 配电房page -->
	<view class="container">
		<v-tabs v-model="current"
			:scroll="true" 
			:tabs="navbar"
			field="name"
			activeColor="#1DD3B8"
			:bold="false"
			height="88rpx"
			lineHeight="6rpx"
			lineColor="#1DD3B8"
			lineRadius="3rpx"
			:fixed="true"
			lineScale="0.2"
		>
		</v-tabs>
		<dropdown-more class="more-btn" :curIndex="current" @click='choseMore'></dropdown-more>
		<view class="tabs__list">
			<swiper class="tabs__swiper" :current="current" @change="changeSwiper">
				<!-- swiper-item/scroll-view 改为view  -->
				<swiper-item class="swiper-item" v-for="(item, index) in navbar" :key="item.id">
					<scroll-view 
						class="scroll-view"
						scroll-y
						enable-back-to-top
						refresher-enabled
						:refresher-triggered="triggered"
						style="height: 100%;">
						<!-- {{navbar[current].name}} -->
						<view class="monitor-items">
							<monitor-items @click="toEnvironment" :itemImg="environmental" itemText="环境监测" :itemIcon="toNext"></monitor-items>
							<monitor-items :itemImg="dynamic" itemText="动力监测" :itemIcon="toNext"></monitor-items>
							<monitor-items :itemImg="safetyDefense" itemText="安全防范" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toMinorControl" :itemImg="minorControl" itemText="辅助控制" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toRVC" :itemImg="rvc" itemText="实时视频" :itemIcon="toNext"></monitor-items>
							<monitor-items @click="toRadioReply" :itemImg="radioReply" itemText="录像回放" :itemIcon="toNext"></monitor-items>
						</view>
						<!-- <view class="load-more">
							<uni-load-more :status="status"></uni-load-more>
						</view> -->
					</scroll-view >	
				</swiper-item>	
			</swiper>
		</view>
	</view>
</template>

<script>
	import monitorItems from '../../components/monitor-items/monitor-items.vue';
	import dropdownMore from '../../components/dropdown-more/dropdown-more.vue'
	
	export default {
		components: {
			monitorItems,dropdownMore,			
		},
		data() {
			return {
				defaultIndex: [0],
				current: 0,
				navbar: [
					{ id: 1, name: '配电房1' },
					{ id: 2, name: '配电房2' },
					{ id: 3, name: '配电房3' },
					{ id: 4, name: '配电房4' },
					{ id: 5, name: '配电房5' },
					{ id: 6, name: '配电房6' },
					{ id: 7, name: '配电房7' },
					{ id: 8, name: '配电房8' },
					{ id: 9, name: '配电房9' },
					{ id: 10, name: '配电房10' },
					{ id: 11, name: '配电房11' },
					{ id: 12, name: '配电房12' }
				],
				environmental: '../../static/image/monitor/environmental.png',
				dynamic:'../../static/image/monitor/dynamic.png',
				safetyDefense:'../../static/image/monitor/safetyDefense.png',
				minorControl: '../../static/image/monitor/minorControl.png',
				rvc: '../../static/image/monitor/rvc.png',
				radioReply: '../../static/image/monitor/radioReply.png',
				toNext: '../../static/image/monitor/toNext.png'
			}
		},
		methods: {
			// swiper切换
			changeSwiper (e) {
				this.current = e.detail.current
				console.log(this.current, typeof(this.current))
			},
			// 更多
			choseMore(e){
				this.current = e.contentIndex
			},
			// 跳转至环境监控界面
			toEnvironment (e) {
				uni.navigateTo({
					url: '/pages/environment-monitor/environment-monitor'
				})
				console.log('detail',e)
			},
			// 跳转至辅助控制
			toMinorControl(){
				uni.navigateTo({
					url: '/pages/minor-control/minor-control'
				})
			},
			// 跳转至实时视频
			toRVC() {
				uni.navigateTo({
					url: '/pages/RVC/RVC'
				})
				
			},
			// 跳转至录像回放
			toRadioReply() {
				uni.navigateTo({
					url: '/pages/radio-reply/radio-reply'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		display: -webkit-box;
		width: 100%;
		height: 100%;
	}
	.container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifdef MP-WEIXIN */
		height: 100vh;
		/* #endif */
		v-tabs {
			width: calc(100% - 72rpx);
		}
		.more-btn {
			width: 72rpx;
			height: 88rpx;
			position: absolute;
			float: left;
			right: 0;
			background-color: #ffffff;
			// border-left: 1rpx solid #1DD3B8;
			// box-shadow: -2rpx 0 10rpx -3rpx #666;
			z-index: 1999;
		}
		.tabs__list {
			width: 750rpx;
			margin-top: 20rpx;
			// margin-right: 24rpx;
			// width: 100%;
		  	box-sizing: border-box;
		  	flex: 1;
		  	overflow-y: scroll;
			// margin: 0 14rpx;
			// margin-bottom: 24rpx;
		    .tabs__swiper {
				height: 100%;
				/* #ifdef H5 */
				height: calc(100% - 50px);
				/* #endif */
				.scroll-view {
					width: 100%;
					
					}
					.monitor-items {
						height: 100%;
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						margin-left: 20rpx;
						// margin-top: 20rpx;
						monitor-items {
							width: 50%;
						}
					}
				.load-more {
					padding-bottom: 10rpx;
				}
		    }
		}
	}
</style>
